<template>
  <div>
    <div class="el">
      <el-button type="primary" @click="addUser" class="bnt1"
        >添加举报类型</el-button
      >
    </div>
    <!-- 添加 -->
    <el-dialog
      class="dialog"
      title="添加"
      :visible.sync="dialogFormVisible"
      :show-close="false"
      :before-close="addUser"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="请输入内容" prop="msg">
          <el-input v-model="ruleForm.msg"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="escButton()">取消</el-button>
        <el-button @click="addSuccess()" type="primary">添加</el-button>
      </div>
    </el-dialog>
    <el-card class="card" v-for="(item, index) in list" :key="index">
      <span>{{ item.report_type_name }}</span>
      <el-button class="esc" type="text" @click="removeButton(item)"
        >删除</el-button
      >
      <el-button class="change" type="text" @click="handleEdit(item)"
        >修改举报类型</el-button
      >
    </el-card>
    <el-dialog
      class="dialog"
      title="修改"
      :visible.sync="show"
      :show-close="false"
      :before-close="handleEdit"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="请输入内容" prop="changeMsg">
          <el-input v-model="ruleForm.changeMsg"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="escChange()">取消</el-button>
        <el-button @click="changeSuccess()" type="primary">修改</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
// import axios from 'axios'
import http from '../api/index';
export default {
  data() {
    var validateChangeMsg = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入内容'));
      } else {
        callback();
      }
    };
    var validateMsg = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入内容'));
      } else {
        callback();
      }
    };
    return {
      list: [],
      dialogFormVisible: false,
      show: false,
      id: '',
      name: '',
      ruleForm: {
        msg: '',
        changeMsg: '',
      },
      rules: {
        msg: [{ required: true, validator: validateMsg, trigger: 'blur' }],
        changeMsg: [
          { required: true, validator: validateChangeMsg, trigger: 'blur' },
        ],
      },
    };
  },
  mounted() {
    http.informPage().then((r) => {
      console.log(r);
      this.list = r.data;
      console.log(this.list);
    });
  },
  methods: {
    // 添加按钮
    addUser(item) {
      this.dialogFormVisible = true;
    },
    // 添加用户成功
    addSuccess() {
      console.log(this.ruleForm.msg);
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          http
            .addInformType({
              report_type_name: this.ruleForm.msg,
            })
            .then((r) => {
              console.log(r);
              http.informPage().then((r) => {
                console.log(r);
                this.list = r.data;
                console.log(this.list);
              });
            });
          this.dialogFormVisible = false;
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 取消添加
    escButton() {
      this.$refs.ruleForm.resetFields();
      this.dialogFormVisible = false;
    },
    // 删除
    removeButton(item) {
      console.log(item.report_type_id);
      http
        .removeInformType({
          report_type_id: item.report_type_id,
        })
        .then((r) => {
          console.log(r);
          http.informPage().then((r) => {
            console.log(r);
            this.list = r.data;
            console.log(this.list);
          });
        });
    },
    // 修改
    handleEdit(item) {
      this.id = item.report_type_id;
      this.name = item.report_type_name;
      console.log(this.id);
      console.log(this.name);
      this.ruleForm.changeMsg = item.report_type_name;
      this.show = true;
    },
    // 修改成功
    changeSuccess(item) {
      //   console.log(this.ruleForm.changeMsg);
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          http
            .changeInformtype({
              report_type_id: this.id,
              report_type_name: this.ruleForm.changeMsg,
            })
            .then((r) => {
              console.log(r);
              http.informPage().then((r) => {
                console.log(r);
                this.list = r.data;
                console.log(this.list);
              });
            });
          console.log(this.id);
          console.log(this.ruleForm.changeMsg);
          this.show = false;
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 取消修改
    escChange() {
      this.show = false;
    },
  },
};
</script>
<style scoped>
.card {
  position: relative;
  margin-left: 0px;
}
.esc {
  position: absolute;
  right: 60px;
}
.change {
  position: absolute;
  right: 100px;
}
.bnt1 {
  position: absolute;
}
.el {
  width: 100%;
  height: 40px;
  position: relative;
}
</style>
